{% extends "base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "操作记录 | 蓝鲸智云" %}</title>
    {{ block.super }}
{% endblock %}


{% block content %}
    <div class="page-content" style="min-width: 80%">
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">操作记录</h3>
            </div>
            <div id="panel-content3" class="panel-body panel-collapse p0 collapse in" aria-expanded="true">
                <table id="record_lists" class="bk-table table-bordered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>平台</th>
                        <th>操作人</th>
                        <th>操作人IP</th>
                        <th>操作时间</th>
                        <th>平台模块</th>
                        <th>操作方法</th>
                        <th>参数</th>
                    </tr>
                    </thead>
                    {#                    <tbody>#}
                    {#                    {% for item in recoreds %}#}
                    {#                        <tr>#}
                    {#                            <td>{{ item.id }}</td>#}
                    {#                            <td>{{ platform|get_item:item.platform }}</td>#}
                    {#                            <td>{{ item.oper_name }}</td>#}
                    {#                            <td>{{ item.oper_ip }}</td>#}
                    {#                            <td>{{ item.oper_datetime }}</td>#}
                    {#                            <td>{{ item.plat_module }}</td>#}
                    {#                            <td>{{ item.oper_method }}</td>#}
                    {#                            <td>{{ item.params }}</td>#}
                    {#                        </tr>#}
                    {#                    {% endfor %}#}
                    {#                    </tbody>#}
                </table>
                <!--分页开始-->
                <!--
                <div class="bk-page bk-page-small" style="float: right">
                    <ul>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">
                                <i class="bk-icon icon-angle-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">1</a>
                        </li>
                        <li class="page-item cur-page">
                            <a href="javascript:void(0);" class="page-button">2</a>
                        </li>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">3</a>
                        </li>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">4</a>
                        </li>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">5</a>
                        </li>
                        <li class="page-item page-omit">
                            ...
                        </li>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">17</a>
                        </li>
                        <li class="page-item">
                            <a href="javascript:void(0);" class="page-button">
                                <i class="bk-icon icon-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                -->
                <!--分页结束-->
            </div>
        </div>
    </div>

    <div style="display: none" id="platform">{{ platform }}</div>
    <div style="display: none" id="oper_method">{{ oper_method }}</div>

{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

    <script>
        $.fn.dataTable.ext.errMode = 'none';       //屏蔽掉报错弹窗
        var remarkShowLength = 50;//默认现实的字符串长度

        // 表格(DataTables)
        var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }
        $("#record_lists").on('error.dt', function (e, settings, techNote, message) {
            console.log(message);
        }).DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers", //添加首页和尾页
            //paging: true, //隐藏分页
            ordering: false, //关闭排序
            autoWidth: false,
            //info: true, //隐藏左下角分页信息
            //searching: false, //关闭搜索
            pageLength: 20, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            language: language, //汉化
            //serverSide: true,
            lengthMenu: [5, 10, 5, 10, 25, 50, 35, 10],
            ajax: {
                url: '{{ SITE_URL }}record_lists/',
                method: "post",
                dataType: 'json',
                data: function (d) {
                    return JSON.stringify({"start": d.start, "length": d.length});
                },
                dataSrc: function (json) {
                    json.recordsTotal = json.records_total;
                    return json.records;
                }
            },
            columns: [
                {
                    targets: 0,
                    data: "id",
                    className: "text-center",
                },
                {
                    targets: 1,
                    data: "platform",
                    className: "text-center",
                    render: function (data, type, full, meta) {
                        return JSON.parse(document.getElementById("platform").innerText)[full.platform];
                    }
                },
                {
                    targets: 2,
                    data: "oper_name",
                    className: "text-center",
                },
                {
                    targets: 3,
                    data: "oper_ip",
                    className: "text-center",
                },
                {
                    targets: 4,
                    data: "oper_datetime",
                    className: "text-center",
                },
                {
                    targets: 5,
                    data: "plat_module",
                    className: "text-center",
                },
                {
                    targets: 6,
                    data: "oper_method",
                    className: "text-center",
                    render: function (data, type, full, meta) {
                        return JSON.parse(document.getElementById("oper_method").innerText)[data];
                    }
                },
                {
                    targets: 7,
                    data: "params",
                    className: "text-center",
                    render: function (data, type, full, meta) {
                        if (full.params.length > remarkShowLength)
                            return partialMsg(full.params);
                        else
                            return full.params;
                    }
                }
            ]
        });

        function partialMsg(msg) {
            return msg.substring(0, remarkShowLength) + '&nbsp;&nbsp;" ><b title="' + msg + '">...</b></a>';
        }
    </script>
{% endblock %}